<template>
<div class="counselor-root">
	<div class="counselor-page">
		<div class="banner">
			<span class="tag">COUNSELOR</span>
			<h2>咨询师申请</h2>
			<p class="desc">请上传您的简历文件（不限类型与大小）</p>
		</div>

		<div class="card">
			<div class="card-title">上传简历</div>

			<el-form :model="form" label-width="96px" class="form-grid">
				<el-form-item label="简历文件" required>
					<el-upload
						v-model:file-list="fileList"
						:auto-upload="false"
						:limit="1"
						:on-change="handleChange"
						:on-exceed="handleExceed"
						list-type="text"
					>
						<el-button type="primary">选择文件</el-button>
						<template #tip>
							<div class="el-upload__tip">不限文件类型与大小</div>
						</template>
					</el-upload>
				</el-form-item>

				<el-form-item label="备注">
					<el-input
						v-model="form.remark"
						placeholder="可选，补充说明"
						type="textarea"
						:rows="3"
					/>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" :loading="submitting" @click="onSubmit" :disabled="!selectedFile">提交申请</el-button>
					<el-button :disabled="submitting" @click="onReset">重置</el-button>
				</el-form-item>

				<div v-if="progress > 0" class="progress-wrap">
					<el-progress :percentage="progress" :striped="true" :stroke-width="10" />
				</div>
			</el-form>
		</div>
	</div>

		<!-- 最近提交的简历：按钮 + 弹窗列表组件 -->
			<div class="card" v-if="isAdmin">
				<el-button type="primary" @click="showList = true">查看近期提交的简历</el-button>
			</div>

			<el-dialog
				v-if="isAdmin"
				v-model="showList"
				title="近期简历提交"
				width="1080px"
				class="large-resume-dialog"
				:draggable="false"
			>
				<ResumeSubmissions />
			</el-dialog>

	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { useCounselorStore } from '@/stores/counselor/counselor'
import { storeToRefs } from 'pinia'
	import ResumeSubmissions from '@/components/counselor/ResumeSubmissions.vue'
	import { useUserStore } from '@/stores/auth/user'

const form = reactive({
	remark: ''
})

const fileList = ref<UploadUserFile[]>([])
const selectedFile = ref<File | null>(null)
const counselorStore = useCounselorStore()
const { submitting, progress } = storeToRefs(counselorStore)
const showList = ref(false)
const userStore = useUserStore()
const isAdmin = computed(() => ['ADMIN', 'SUPER_ADMIN'].includes((userStore.user?.role as any) || ''))

// 分片上传逻辑已迁移至 Pinia store


const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	// 仅保留一个
	if (uploadFiles.length > 1) {
		uploadFiles.splice(0, uploadFiles.length - 1)
	}

	const raw = uploadFile.raw
	if (!raw) {
		selectedFile.value = null
		fileList.value = []
		return
	}

	selectedFile.value = raw
	fileList.value = [uploadFile]
}

const handleExceed: UploadProps['onExceed'] = (files) => {
	ElMessage.warning('仅允许上传 1 个文件，已替换为最新选择')
	// 替换为新文件
	const f = files?.[0]
	if (!f) return
	// 模拟触发 change 流程
	handleChange({
		name: f.name,
		percentage: 0,
		status: 'ready',
		size: (f as any).size,
		raw: f as any,
		uid: Date.now().toString(),
	} as any, [
		{
			name: f.name,
			percentage: 0,
			status: 'ready',
			size: (f as any).size,
			raw: f as any,
			uid: Date.now().toString(),
		} as any,
	])
}

async function onSubmit() {
	  if (!selectedFile.value) {
    ElMessage.warning('请先选择简历文件')
    return
  }
  const file = selectedFile.value
//   console.log('上传文件：', file)
		// 统一改为分片上传
		await counselorStore.uploadFileInChunks(file, form.remark,{
		chunkSize: 2 * 1024 * 1024,
		rules: {
			maxBytes: 10 * 1024 * 1024,
			allowedMimeTypes: [
				'application/pdf',
				'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
				'text/plain'
			],
			allowedExtensions: ['pdf', 'docx', 'txt']
		},
		module: 'resume'
	})
  onReset()
}

function onReset() {
	form.remark = ''
	fileList.value = []
	selectedFile.value = null
	progress.value = 0
}

</script>

<style scoped>
.counselor-page {
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 16px;
}
.banner {
	background: linear-gradient(135deg, #10b981 0%, #22c55e 100%);
	color: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(34,197,94,0.25);
}
.banner h2 { margin: 8px 0 4px; font-weight: 700; }
.banner .desc { opacity: 0.9; }
.tag {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2px;
	border: 1px solid rgba(255,255,255,0.7);
	padding: 2px 8px;
	border-radius: 999px;
}

.card {
	margin-top: 16px;
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card-title { font-weight: 600; margin-bottom: 12px; }
.form-grid { max-width: 720px; }
.progress-wrap { margin: 8px 0; }
</style>

<style>
/* 非 scoped: 覆盖 el-dialog 内容区域，适配更宽表格 */
.large-resume-dialog .el-dialog__body {
	padding: 8px 4px 16px 4px;
}
.large-resume-dialog .resume-submissions {
	/* 扩展最小宽度，减少横向滚动 */
	min-width: 1000px;
}
@media (max-width: 1200px) {
	.large-resume-dialog {
		width: 95% !important;
	}
	.large-resume-dialog .resume-submissions {
		min-width: auto;
	}
}
</style>
